<template>
  <d2-container>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="title"
        fixed
        width="100"
        show-overflow-tooltip
        label="旅店名"
      >
      </el-table-column>
      <el-table-column
        prop="scan"
        width="100"
        show-overflow-tooltip
        label="浏览量"
      >
      </el-table-column>
      <el-table-column prop="imgArr" width="210" label="客栈图片">
        <template slot-scope="scope">
          <div>
            <el-carousel direction="vertical" :autoplay="false" height="100px">
              <el-carousel-item
                v-for="(item, index) in scope.row.imgArr"
                :key="index"
              >
                <el-image
                  style="width: 100%; height: 100px"
                  :src="item"
                  :preview-src-list="[item]"
                >
                </el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="avatar" label="企业头像">
        <template slot-scope="scope">
          <el-avatar :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        width="150"
        show-overflow-tooltip
        label="客栈具体地址"
      >
      </el-table-column>
      <el-table-column
        prop="province"
        width="150"
        show-overflow-tooltip
        label="客栈省份"
      >
      </el-table-column>
      <el-table-column
        prop="introduce"
        width="150"
        show-overflow-tooltip
        label="客栈介绍"
      >
      </el-table-column>
      <el-table-column
        prop="time"
        width="150"
        show-overflow-tooltip
        label="招募时间"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        width="150"
        show-overflow-tooltip
        label="招募人姓名"
      >
      </el-table-column>
      <el-table-column
        prop="number"
        width="150"
        show-overflow-tooltip
        label="招募人数"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        width="150"
        show-overflow-tooltip
        label="企业联系电话"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        width="150"
        show-overflow-tooltip
        label="工作内容"
      >
      </el-table-column>
      <el-table-column
        prop="demand"
        width="150"
        show-overflow-tooltip
        label="要求"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        width="150"
        show-overflow-tooltip
        label="状态"
      >
        <template slot-scope="scope">
          <el-tag type="info" v-if="scope.row.status === 0">待审核</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 1">审核拒绝</el-tag>
          <el-tag v-if="scope.row.status === 2">审核通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        show-overflow-tooltip
        prop="enterprise"
        label="企业"
      >
        <template slot-scope="scope">
          <el-tag>
            {{ scope.row.enterprise.enterpriseName }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="210" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-row v-if="scope.row.status === 0">
            <el-popconfirm
              @confirm="() => handleSetStatus(scope.row._id, 2)"
              title="是否通过企业审核？"
            >
              <el-button type="primary" round size="small" slot="reference"
                >通过审核</el-button
              >
            </el-popconfirm>
            <el-popconfirm
              @confirm="() => handleSetStatus(scope.row._id, 1)"
              title="是否拒绝企业审核？"
            >
              <el-button type="danger" round size="small" slot="reference"
                >拒绝审核</el-button
              >
            </el-popconfirm>
          </el-row>
          <el-tag type="info" v-else>无法操作</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :pageInfo="pageInfo"
      :total="total"
      :handleCurrentChange="handleCurrentChange"
      :handleSizeChange="handleSizeChange"
    />
  </d2-container>
</template>

<script>
import api from "@/api";
import Pagination from "@/components/Pagination/index.vue";

export default {
  components: { Pagination },
  comments: {
    Pagination,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        pageSize: 10,
        current: 1,
      },
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const { pageSize, current, rows, count } = await api.GET_RECRUIT(
        this.pageInfo
      );
      this.tableData = rows;
      this.pageInfo = {
        pageSize,
        current,
      };
      this.total = count;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.current = val;
      this.fetchData();
    },
    async handleSetStatus(id, status) {
      await api.SET_RECRUIT_STATUS(id, { status });
      this.$message("修改成功");
      await this.fetchData();
    },
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
</style>
